import React from "react";
import { Spin, Icon, Popover } from "antd";
import { observer } from "mobx-react";
import { WeaInputSearch,WeaLocaleProvider } from "ecCom";
import List from 'react-virtualized/dist/commonjs/List';
import AutoSizer from 'react-virtualized/dist/commonjs/AutoSizer';
import TableItem from "./TableItem";
import 'react-virtualized/styles.css'
import "./index.less";
const getLabel = WeaLocaleProvider.getLabel;

@observer
export default class Editor extends React.Component {
    state = {
        searchText: ''
    };

    onSearchTextChange(searchText) {
        this.setState({ searchText });
    }

    renderTableName(row, table) {
        const { key, style } = row;

        return (
            <TableItem ecId={`${this && this.props && this.props.ecId || ''}_TableItem@aa1qor`}
                key={key}
                style={style}
                data={table}
            />
        );
    }
    getTables() {
        const { store } = this.props;
        const { dbTables } = store;
        const searchText = this.state.searchText.toLowerCase();

        return (dbTables || []).filter(({ name, text = '' }) => {
            name = name.toLowerCase();
            text = text.toLowerCase();

            return ~name.indexOf(searchText) || ~text.indexOf(searchText);
        });
    }
    showDataSourceSelection = () => {
        const { store } = this.props;
        if (!store.dsSelectionVisible) {
            store.showDataSourceSelection();
        }
    }
    changeDataSource = (dsKey)=>{
        const { store } = this.props;
        store.changeDataSource(dsKey);
    }
    render() {
        const { searchText } = this.state;
        const { store } = this.props;
        const { currentDataSource = {}, dsLoading, dataSource, dsSelectionVisible } = store;
        const showTables = this.getTables();

        return (
            <div className='edc-ds-sider' style={{ width: 240 }}>
                <div className='edc-ds-desc'>
                    <p className='edc-ds-title'>{getLabel(502330,'数据源')}</p>
                    <div>
                        <p className='edc-ds-name wea-f14 edc-ds-ellipsis'>{currentDataSource.name}</p>
                        <p className='edc-ds-type'>{currentDataSource.type}</p>
                        <Icon ecId={`${this && this.props && this.props.ecId || ''}_Icon@7nz0cb`} type="edit" onClick={this.showDataSourceSelection} />
                        <ul className={`edc-ds-selection${dsSelectionVisible ? " selection-show" : ''}`}>
                            {dsLoading ? <Spin ecId={`${this && this.props && this.props.ecId || ''}_Spin@m5hmg8`} spinning={dsLoading}></Spin> :
                                dataSource.map(ds => {
                                    return (
                                        <li onClick={this.changeDataSource.bind(this, ds.key)} className="edc-ds-option">{ds.name}({ds.type})</li>
                                    )
                                })
                            }
                        </ul>
                    </div>
                </div>
                <div className='edc-ds-table'>
                    <p className='edc-ds-title'>{getLabel(502692,'表、视图')}</p>
                    <div className='edc-ds-search'>
                        <WeaInputSearch ecId={`${this && this.props && this.props.ecId || ''}_WeaInputSearch@xezuyk`}
                            placeholder={getLabel('502704','请输入表名')}
                            value={searchText}
                            style={{ width: '100%' }}
                            onSearchChange={v => this.onSearchTextChange(v)}
                        />
                    </div>
                    <div className='edc-ds-table-list' ref={list => this.list = list}>
                        <Spin ecId={`${this && this.props && this.props.ecId || ''}_Spin@v64mjx`} spinning={store.tableLoading}>
                            <AutoSizer ecId={`${this && this.props && this.props.ecId || ''}_AutoSizer@v1tdz4`}>
                                {({ width, height }) => (
                                    <List ecId={`${this && this.props && this.props.ecId || ''}_List@dpwmoq`}
                                        width={width}
                                        height={height}
                                        rowCount={showTables.length}
                                        rowHeight={42}
                                        rowRenderer={row => this.renderTableName(row, showTables[row.index])}
                                    />
                                )}
                            </AutoSizer>
                        </Spin>
                    </div>
                </div>
            </div>
        );
    }
}

